<template>
  <div>
    <h1>slot</h1>
    <test-1 :todos="todos">
      <template v-slot="{$row,$index}">
        <span :style="{color:$row.done? 'green': 'red'}">{{ $row.title }}---{{ $index }}</span>
      </template>
    </test-1>
    <test>
      <div>
        <pre>大江东去浪淘尽，千古分流人物</pre>
      </div>
      <!-- 具名插槽填充a -->
      <template v-slot:a>
        <div>我是填充具名插槽a位置结构</div>
      </template>
      <!-- 具名插槽填充b v-slot指令可以简化为# -->
      <template #b>
        <div>我是填充具名插槽b位置结构</div>
      </template>
    </test>
  </div>
</template>

<script setup lang="ts">
import test from './test.vue'
import test1 from './test1.vue'

import {ref} from "vue"
let todos = ref([
  {id: 1, title: '吃饭', done: true},
  {id: 2, title: '睡觉', done: false},
  {id: 3, title: '打豆豆', done: true},
  {id: 4, title: '打游戏', done: false},
])
</script>
<style scoped lang="less">
</style>